<template>
  <div class="page">
    <!-- 下拉刷新容器 -->
    <div class="scroll" @scroll="handleScroll" ref="scrollView">
      <!-- 笑话列表 -->
      <div v-for="(item, index) in list" :key="index" class="item">
        {{ item }}
      </div>
    </div>

    <!-- 更新按钮 -->
    <button class="update-button" @click="reloadData">更新笑话列表</button>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'

  // 定义响应式数据
  const list = ref([]) // 笑话列表
  const isRefresh = ref(false) // 是否正在刷新
  const scrollView = ref(null) // 滚动容器引用

  // 判断当前环境是否为微信小程序
  const isWeChatMiniProgram = () => {
    return (
      typeof uni !== 'undefined' &&
      uni.getSystemInfoSync().platform === 'devtools'
    )
  }

  // 获取笑话列表
  const getJokeList = async () => {
    try {
      // 显示加载提示
      if (isWeChatMiniProgram()) {
        uni.showLoading({ title: '数据加载中' })
      } else {
        console.log('数据加载中...') // 浏览器环境
      }

      let res
      if (isWeChatMiniProgram()) {
        // 微信小程序环境：使用 uni.request
        res = await uni.request({
          url: 'https://api-vue-base.itheima.net/api/joke/list',
          method: 'GET',
          data: { num: 10 }, // 请求参数
        })
        res = res.data // uni.request 返回的数据结构
      } else {
        // 浏览器环境：使用 fetch
        const response = await fetch(
          'https://api-vue-base.itheima.net/api/joke/list?num=10'
        )
        res = await response.json()
      }

      // 返回数据
      return res.data
    } catch (error) {
      console.error('请求失败', error)
    } finally {
      // 隐藏加载提示
      if (isWeChatMiniProgram()) {
        uni.hideLoading()
      } else {
        console.log('加载完成') // 浏览器环境
      }
    }
  }

  // 下拉刷新
  const reloadData = async () => {
    isRefresh.value = true // 开启刷新状态

    if (isWeChatMiniProgram()) {
      uni.startPullDownRefresh() // 微信小程序下拉刷新
    }

    const res = await getJokeList() // 重新加载数据
    list.value = res // 更新列表
    isRefresh.value = false // 关闭刷新状态

    if (isWeChatMiniProgram()) {
      uni.stopPullDownRefresh() // 微信小程序停止下拉刷新
    }
  }

  // 加载更多数据
  const getMoreData = async () => {
    const res = await getJokeList() // 获取更多数据
    list.value.push(...res) // 将新数据追加到列表中
  }

  // 处理滚动事件
  const handleScroll = () => {
    if (
      scrollView.value.scrollTop + scrollView.value.clientHeight >=
      scrollView.value.scrollHeight
    ) {
      getMoreData() // 滚动到底部时加载更多数据
    }
  }

  // 页面加载时初始化数据
  onMounted(async () => {
    const res = await getJokeList() // 获取初始数据
    list.value = res // 更新列表

    // 微信小程序：监听下拉刷新事件
    if (isWeChatMiniProgram()) {
      uni.onPullDownRefresh(() => {
        reloadData()
      })
    }
  })
</script>

<style scoped>
  .page {
    background-color: aqua;
    height: 100vh;
    position: relative;
  }

  .item {
    margin: 20rpx;
    padding: 20rpx;
    border-radius: 20rpx;
    background-color: #fff;
  }

  .scroll {
    height: calc(100vh - 60px); /* 减去按钮高度 */
    overflow-y: auto;
  }

  .update-button {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background-color: #007aff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
</style>
